<template>
  <div class="main">
    <div class="header">
      <span class="title">{{title}}</span>
    </div>
    <el-form class="user-layout-login" @keyup.enter="handleSubmit">
      <login-account ref="accLogin" :valid-code="false" :rules="rules"/>
      <el-form-item style="margin-top:24px">
        <el-button size="large" type="primary" htmlType="submit" class="login-button" :loading="loginBtn"
                   @click.stop.prevent="handleSubmit" :disabled="loginBtn">
          确定
        </el-button>
      </el-form-item>
    </el-form>y

  </div>
</template>

<script lang="ts" setup>

import LoginAccount from "@/views/login/LoginAccount.vue";
import MainLayout from "@/views/layouts/MainLeftLayout.vue";

import {CACHE_INCLUDED_ROUTES} from "@/stores/conf";

import {getCurrentInstance, onMounted, reactive, ref, toRaw} from "vue";
import {useRouter} from 'vue-router'
import {useStore} from "@/stores";
import {msgWarn} from "@/utils/InfoUtil";
import {loadAuthUserAsset, userLogin} from "@/apis";

const router = useRouter();
const store = useStore();
const cache = getCurrentInstance()?.proxy?.$sessionCache;
let loginBtn = ref(false);
const accLogin = ref();
const title: any = ref(store.settings.title);

const rules = reactive({
  username: [{required: true, message: '请输入用户名称', trigger: ['blur', 'change']},],
  password: [{required: true, message: '请输入用户密码', trigger: ['blur', 'change']},],
  checkCode: [{required: true, message: '请输入验证码', trigger: ['blur', 'change']},],
})

onMounted(() => {
  cache.remove(CACHE_INCLUDED_ROUTES);
  store.setTopMenuMap({
    'PlatformList': {
      name: 'platform',
      path: '/platform',
      component: '/Platform'
    },
    'RealmList': {
      name: 'realm',
      path: '/realm',
      component: '/Realms'
    }
  })
});

const handleLogin = async (params: any) => {
  // 开始请求后端接口登录
  const loginContext: any = {
    category: 'account',
    username: params.username,
    authCode: params.password,
  }
  const result = await userLogin(loginContext);
  console.log('--- 登陆返回', result);

  if (result && result.code === 0) {
    loginBtn.value = true;
    // 保存登录返回的用户信息
    store.setUserData(result.data);
    await loginSuccess(params);
  } else {
    msgWarn(result.message);
  }
}

const handleSubmit = async () => {
  const params = await accLogin.value?.loginParams();
  console.log('--- 开始登陆', toRaw(params));

  if (params) {
    await handleLogin(toRaw(params));
  }
}

const loadUserAssets = async () => {
  console.log('-- 登录成功，加载用户资源');
  const assets = await loadAuthUserAsset();
  console.log('-- 登录成功，获取用户资源', assets);

  store.updateUserAssets(assets.data);
  store.buildRouteMenus(MainLayout, assets.data.menus, '/home');
}

// 登录成功
const loginSuccess = async (loginResult: any) => {
  console.log('-- 登录成功', loginResult);

  loginBtn.value = false;

  await loadUserAssets();
  await router.replace({
    path: store.getHomeRoute(),
    query: {}
  });
}

</script>
<style lang="less" scoped>
.main {
  border: 1px solid #234DE3;
  border-radius: 6px;
  background-color: #ffffff;
  padding: 60px;
  position: relative;
  left: 70%;
}

.header {
  color: #000000;
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  padding-bottom: 22px;
  // padding-top: 30px;
}

.user-layout-login {
  label {
    font-size: 14px;
  }

  .getCaptcha {
    display: block;
    width: 100%;
    height: 40px;
  }

  .forge-password {
    font-size: 14px;
  }

  button.login-button {
    padding: 0 15px;
    font-size: 16px;
    height: 40px;
    width: 100%;
  }

  .user-login-other {
    text-align: left;
    margin-top: 24px;
    line-height: 22px;

    .item-icon {
      font-size: 24px;
      color: rgba(0, 0, 0, 0.2);
      margin-left: 16px;
      vertical-align: middle;
      cursor: pointer;
      transition: color 0.3s;

      &:hover {
        color: #1890ff;
      }
    }

    .register {
      float: right;
    }
  }
}
</style>
<style>
.valid-error .ant-select-selection__placeholder {
  color: #f5222d;
}

.ant-btn-primary {
  background-color: #234DE3;
  border-color: #234DE3;
}
</style>
